<template>
  <div class="invitefriends">
    <headers><p>邀请好友</p></headers>
    <div class="img-show">
      <img class="friendImg" src="../../assets/image/pic@3x.png" alt="frends">
    </div>
    <div class="content">
      <div class="introduce">
        <p>好友通過您分享的邀請碼註冊成功，您和您的好友都將獲得3張免費騎行卷</p>
      </div>
      <div class="invite">
        <div class="title">
          <p>您的邀請碼是</p>
        </div>
        <div class="inviteNum">
          <p>{{invite}}</p>
        </div>
      </div>
      <div class="invite">
        <div class="title">
          <p>誰邀請您一起騎行</p>
        </div>
        <div class="inviteNum">
          <input v-model="otherInvite" class="putInvite" placeholder="朋友的邀請碼" type="text">
          <button class="btn" @click="btnInvite">提交</button>
        </div>
      </div>
      <div class="share">
        <div class="title f-part">
          <p>分享至</p>
        </div>
        <div class="facebook">
          <a href="https://www.facebook.com/sharer/sharer.php?u=http://gobike.test.cmmkj.top/charge.html#/invitation/invitefriends&title=邀请好友">
            <div class="faceLogo">
              <img src="../../assets/image/ic_facebook@3x.png" alt="facebook">
            </div>
            <div class="f-num">
              <div>
                <p>您已經邀請了{{num}}位好友</p>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="warp" v-if="showWarp">
      <div class="shadw"></div>
      <div class="box">
        <div class="massge">
           <p v-if="type === 1">恭喜你获得一张骑行卷</p>
           <p v-if="type === 0">{{invitation_err}}</p>
        </div>
        <div class="box-btn">
          <!-- <div class="return b-sty">返回</div> -->
          <div class="verify b-sty" @click="closeWarp">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headers from '@/components/header.vue'
export default {
  components: {headers},
  data () {
    return {
      invite: '',
      user_id: '',
      otherInvite: '',
      invitation_err: '',
      num: '',
      showWarp: false,
      type: 2
    }
  },
  mounted () {
    this.getTheApp()
  },
  methods: {
    getTheApp: function () {
      // this.invite = _native_.getInventCode()
      // this.user_id = _native_.getUserId()
      // this.num = _native_.getInvitationCount()
    },
    btnInvite: function (inviteCode) {
      console.log(this.otherInvite)
      this.type = 2
      this.$api.post('/v1/user/invitation_user', {user_id: this.user_id, invitation_code: this.otherInvite})
      // this.$api.post('http://gobike.test.cmmkj.top/v1/user/invitation_user', {user_id: this.user_id, invitation_code: this.otherInvite})
      .then((res) => {
        console.log(res)
        this.type = 1
        this.showWarp = true
      }).catch((err) => {
        console.log('----->', err)
        this.type = 0
        this.showWarp = true
        this.invitation_err = err.message
      })
    },
    closeWarp: function () {
      this.showWarp = false
    }
  }
}
</script>

<style scoped="scoped">
.invitefriends p{
  padding: 0;
  margin: 0;
}
.img-show {
  height: 4.14rem;
  margin: 0 auto;
}
.friendImg {
  width: 100%;
  height: 100%;
}
.content {
  padding: 0rem 0.39rem;
}
.introduce {
  font-size: 0.28rem;
  line-height: 0.42rem;
  color: #656A83;
}
.invite {
  width: 100%;
  margin-top: 0.5rem;
}
.title p{
  font-size: 0.34rem;
  line-height: 0.7rem;
  font-weight: 600;
  color: #292C3B;
}
.inviteNum {
  height: 0.91rem;
  border-radius: 0.05rem;
  background: #EFF5F8;
}
.inviteNum p {
  font-size: 0.42rem;
  font-weight: 600;
  padding-left: 0.30rem;
  line-height: 0.91rem;
  color: #01D7C8;
}
.putInvite {
  width: 4.5rem;
  border: none;
  font-size: 0.28rem;
  background-color: #EFF5F8;
  color: #01D7C8;
  padding: 0.27rem 0.30rem;
}
.btn {
  width: 1.5rem;
  height: 0.91rem;
  border: none;
  color: #fff;
  background-color: #01D7C8;
  float: right;
}
.share {
  margin-top: 0.5rem;
}
.f-part {
  letter-spacing: 0.05rem;
}
.facebook {
  margin-top: .20rem;
}
.faceLogo {
  float: left;
}
.faceLogo img {
  width: 0.96rem;
  height: 0.96rem;
}
.f-num {
  height: 0.96rem;
  margin-left: 0.2rem;
  font-size: 0.24rem;
  color: #292C3B;
  float: left;
  background-image: url('../../assets/image/inviteLeft.png');
  background-repeat: no-repeat;
  background-size: 0.8rem 0.38rem;
  background-position: left bottom;
}
.warp {
  width: 100vw;
  height: 100vh;
  position:fixed;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shadw {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-color: #000;
  opacity: .6;
}
.box {
  width: 80%;
  background-color: #fff;
  text-align: center;
  z-index: 100;
  border-radius: 3px;
}
.massge {
  min-height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box p {
  line-height: .4rem;
}
.box-btn {
  display: flex;
  justify-content: center;
}
.b-sty {
  width: 50%;
  text-align: center;
  line-height: .8rem;
  border-top: 1px solid #ccc;
}
.return {
  border-right: 1px solid #ccc;
}
</style>

